/**
 * #info
 *
 * @author wuwg
 * @createTime 2018/03/20
 * @updateTime 2018/03/21
 * @description 面板控件
 */
import config from '../../../config/config.js'

/**
 * #item
 *
 * @type aty-panel
 * @cn   面板
 * @order 110
 * @nameprop text
 * @stPlugin true
 * @stContainer true
 * @mixins   [./components/components/basic/$listenersAnnotation.js]
 */
const module = {
  name: config.prefix + '-panel',
  props: {
    /**
     * #property
     *
     * @name hasBorder
     * @cn   是否显示边框
     * @group 控制
     * @type boolean
     * @value false
     * @description  是否显示边框
     */
    hasBorder: {
      type: Boolean,
      default: false
    },
    /**
     * #property
     *
     * @name width
     * @cn 面板宽度
     * @type string,number
     * @group 大小
     * @description 面板的宽度
     */
    width: {
      type: [String, Number],
      default: ''
    },
    /**
     * #property
     *
     * @name height
     * @cn 面板高度
     * @type string,number
     * @group 大小
     * @description 面板的高度
     */
    height: {
      type: [String, Number],
      default: ''
    },
    /**
     * #property
     *
     * @name text
     * @cn 文本
     * @group 数据
     * @type string
     * @description 面板中的文本，如果里面插入了其他内容，文本将无效
     */
    text: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      scope: {
        className: config.prefix + '-panel'
      }
    }
  },
  computed: {
    currentWidth () {
      return typeof this.width === 'number' ? this.width + 'px' : this.width
    },
    currentHeight () {
      return typeof this.height === 'number' ? this.height + 'px' : this.height
    },
    classes () {
      return {
        [this.scope.className]: true,
        [`${config.prefix}-border-default`]: this.hasBorder
      }
    },
    styles () {
      return {
        width: this.currentWidth,
        height: this.currentHeight
      }
    }
  }
}
export default module
